<template>
    <div class="layout_header">
        <div class="siderSvg" @click="app.toggleSiderCollapse">
            <el-icon>
                <Expand v-if="app.siderCollapse" />
                <Fold v-else />
            </el-icon>

            <!-- <icon-line-md-menu-unfold-left v-if="app.siderCollapse" class="text-16px" />
            <icon-line-md-menu-fold-left v-else class="text-16px" /> -->
        </div>
        <div class="fr">
            <div class="customIcon">
                <el-tooltip
                    v-for="(item, index) in headerUtils"
                    :key="index"
                    class="box-item"
                    effect="dark"
                    :content="item.tooltipContent"
                    placement="bottom"
                >
                    <el-icon @click="toggleDark()">
                        <component :is="item.iconVnode"></component>
                    </el-icon>
                </el-tooltip>
            </div>
            <div class="layout_avatar" @click="auth.resetAuthStore()">
                <img :src="avatar" alt="" class="avatarInfo" />
                <span>管理员</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { shallowRef, reactive, markRaw } from 'vue';

import { useAppStore, useAuthStore } from '@/store';
import avatar from '@img/avatar01.svg';
import { useDark, useToggle } from '@vueuse/core';
import { Sunny, Moon } from '@element-plus/icons-vue';
import { Local } from '@/utils';

const app = useAppStore();
const auth = useAuthStore();
const isDarkStatus = shallowRef<boolean>(Local.get('vueuse-color-scheme', true) === 'dark');
/** 头部工具栏 */
const headerUtils = reactive([
    {
        iconVnode: isDarkStatus.value ? Moon : Sunny,
        tooltipContent: '主题模式'
    }
]);
/** 暗黑模式切换 */
const isDark = useDark({
    valueDark: 'dark',
    valueLight: 'light',
    onChanged: (isDark: boolean) => {
        const DARK_CLASS = isDark ? 'dark' : 'light';
        document.documentElement.classList.remove(isDark ? 'light' : 'dark');
        document.documentElement.classList.add(DARK_CLASS);
        headerUtils[0].iconVnode = markRaw(isDark ? Moon : Sunny);
        isDarkStatus.value = isDark;
    }
});
const toggleDark = useToggle(isDark);
</script>
<style scoped lang="scss">
$avatarInfo: 32px;
.layout_header {
    box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    .fr {
        display: flex;
        align-items: center;
        .customIcon {
            margin-right: 10px;
            height: 100%;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            &:hover {
                background: var(--el-header-bg-hover);
            }
        }
    }
    .siderSvg {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        &:hover {
            background: var(--el-header-bg-hover);
        }
    }
    .layout_avatar {
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: flex-end;
        padding: 0 12px;
        width: max-content;
        span {
            padding-left: 8px;
        }
        &:hover {
            background: var(--el-header-bg-hover);
        }
    }
    .avatarInfo {
        width: $avatarInfo;
        height: $avatarInfo;
    }
}
</style>
